<template>
  <div class="aps-section">
    <el-row>
      <span style="font-weight: 600; margin-top: 1px; font-size: large; color: rgb(1, 128, 165);">
        设备选用
      </span>
      <!-- 右侧浮动的按钮 -->
      <el-button type="text" style="float: right;" @click="toggleDisplay">
        {{ showDevices ? '收起' : '展开' }}
      </el-button>
    </el-row>
    
    <transition name="slide-toggle">
      <div v-show="showDevices" style="margin-top: 20px;">
        
        <!-- 添加设备按钮 -->
        <div class="add-device-section">
          <el-button type="primary" size="small" class="idoo-details-button" @click="openDeviceSelector">
            + 选择设备
          </el-button>
          <el-button 
            type="success" 
            size="small" 
            class="idoo-order-query-button" 
            @click="queryDevicesByOrders"
            :disabled="!selectedOrders || selectedOrders.length === 0"
            style="margin-left: 10px;"
          >
            按订单查询设备
          </el-button>
        </div>

        <!-- 设备表格 -->
        <div v-if="deviceGroupsData.length === 0" class="empty-state" style="margin-top: 20px;">
          暂无设备配置，请点击"选择设备"开始配置
        </div>
        
        <el-table
          v-if="deviceGroupsData.length > 0"
          :data="deviceGroupsData"
          :default-expand-all="false"
          style="width: 100%; margin-top: 20px;"
          class="device-table"
          row-key="equipType"
        >
          <!-- 展开列 -->
          <el-table-column type="expand">
            <template #default="{ row }">
              <div class="expand-content">
                <div class="device-list-section">
                  <div class="section-header">
                    <span class="section-title">{{ row.equipType }} 设备列表</span>
                  </div>
                  
                  <div class="devices-grid">
                    <div 
                      v-for="(device, deviceIndex) in row.devices" 
                      :key="device.id" 
                      class="device-item-card"
                    >
                      <div class="device-card-header">
                        <div class="device-card-title">
                          <span class="device-name">{{ device.equipName }}</span>
                          <span class="device-code">{{ device.equipCode }}</span>
                        </div>
                        <el-button 
                          type="text" 
                          size="small" 
                          class="delete-device-btn"
                          @click="removeDeviceFromGroup(row.equipType, deviceIndex)"
                        >
                          <el-icon><Delete /></el-icon>
                        </el-button>
                      </div>
                      
                      <div class="device-card-info">
                        <div class="device-info-row">
                          <span class="info-label">设备编号:</span>
                          <span class="info-value">{{ device.equipCode }}</span>
                        </div>
                        <div class="device-info-row">
                          <span class="info-label">设备名称:</span>
                          <span class="info-value">{{ device.equipName }}</span>
                        </div>
                        <div class="device-info-row" v-if="device.equipCapacity">
                          <span class="info-label">设备容量:</span>
                          <span class="info-value">{{ device.equipCapacity }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          
          <!-- 设备类型列 -->
          <el-table-column prop="equipType" label="设备类型" width="200" />
          
          <!-- 设备数量列 -->
          <el-table-column label="设备数量" width="120">
            <template #default="{ row }">
              <el-tag size="small" type="info">{{ row.deviceCount }} 台</el-tag>
            </template>
          </el-table-column>
          
          <!-- 设备名称列表 -->
          <el-table-column label="设备名称" min-width="300">
            <template #default="{ row }">
              <div class="device-names">
                <el-tag 
                  v-for="device in row.devices.slice(0, 3)" 
                  :key="device.id"
                  size="small" 
                  style="margin: 2px;"
                >
                  {{ device.equipName }}
                </el-tag>
                <el-tag 
                  v-if="row.devices.length > 3"
                  size="small" 
                  type="info"
                  style="margin: 2px;"
                >
                  +{{ row.devices.length - 3 }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </transition>

    <!-- 设备选择对话框 -->
    <el-dialog
      v-model="deviceSelectorVisible"
      title="选择设备"
      width="900px"
      :close-on-click-modal="false"
    >
      <div class="device-selector-content">
        <!-- 按设备类型分组显示 -->
        <div v-if="loadingDevices" class="loading-state">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span style="margin-left: 10px;">加载设备数据中...</span>
        </div>
        
        <div v-else>
          <div v-for="(devices, type) in devicesByType" :key="type" class="device-type-group">
            <div class="device-type-header">
              <el-checkbox 
                v-model="typeSelectAll[type]"
                @change="toggleTypeSelection(type, $event)"
              >
                <span class="type-title">{{ type || '未分类' }} ({{ devices.length }})</span>
              </el-checkbox>
            </div>
            
            <div class="device-list">
              <el-checkbox-group v-model="selectedDeviceIds">
                <div v-for="device in devices" :key="device.id" class="device-item">
                  <el-checkbox :label="device.id">
                    <span class="device-info">
                      <span class="device-name">{{ device.equipName }}</span>
                      <span class="device-meta">编号: {{ device.equipCode }}</span>
                    </span>
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          
          <div v-if="Object.keys(devicesByType).length === 0" class="empty-state">
            暂无可选设备
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deviceSelectorVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDeviceSelection">
            确定（已选择 {{ selectedDeviceIds.length }} 个设备）
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, defineComponent, computed, watch } from 'vue'
import { Delete, Loading } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { basicEquipApi } from '@/api/basicEquip'

export default defineComponent({
  name: 'DeviceConfig',
  components: {
    Delete,
    Loading
  },
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    selectedOrders: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'update:collapsed'],
  setup(props, { emit }) {
    // 控制显示隐藏
    const showDevices = ref(!props.collapsed)
    
    // 设备数据 - 初始化时从props加载数据
    const devicesData = reactive(props.modelValue && Array.isArray(props.modelValue) ? [...props.modelValue] : [])

    // 按设备类型分组的数据，用于表格展示
    const deviceGroupsData = computed(() => {
      const grouped = {}
      
      // 按设备类型分组
      devicesData.forEach(device => {
        const type = device.equipType || '未分类'
        if (!grouped[type]) {
          grouped[type] = []
        }
        grouped[type].push(device)
      })
      
      // 转换为表格数据格式
      return Object.keys(grouped).map(equipType => ({
        equipType,
        deviceCount: grouped[equipType].length,
        devices: grouped[equipType]
      }))
    })

    // 设备选择对话框相关
    const deviceSelectorVisible = ref(false)
    const loadingDevices = ref(false)
    const availableDevices = ref([])
    const selectedDeviceIds = ref([])
    const typeSelectAll = ref({})

    // 按设备类型分组
    const devicesByType = computed(() => {
      const grouped = {}
      availableDevices.value.forEach(device => {
        const type = device.equipType || '未分类'
        if (!grouped[type]) {
          grouped[type] = []
        }
        grouped[type].push(device)
      })
      return grouped
    })

    // 生成设备ID
    let deviceIdCounter = Date.now()

    // 创建设备对象（从后端数据）
    const createDeviceFromBackend = (backendDevice) => {
      // 确保设备有唯一的ID - 使用后端ID作为主要标识
      const deviceId = backendDevice.id || `device_${++deviceIdCounter}`
      return {
        id: deviceId,
        equipId: backendDevice.id, // 保留原始后端ID
        equipCode: backendDevice.equipCode,
        equipName: backendDevice.equipName,
        equipType: backendDevice.equipType || '未分类',
        equipCapacity: backendDevice.equipCapacity
      }
    }

    // 切换显示状态
    const toggleDisplay = () => {
      showDevices.value = !showDevices.value
      emit('update:collapsed', !showDevices.value)
    }

    // 切换设备展开状态
    const toggleDeviceExpand = (deviceIndex) => {
      devicesData[deviceIndex].expanded = !devicesData[deviceIndex].expanded
      updateData()
    }

    // 打开设备选择器
    const openDeviceSelector = async () => {
      deviceSelectorVisible.value = true
      loadingDevices.value = true
      selectedDeviceIds.value = []
      typeSelectAll.value = {}
      
      try {
        const response = await basicEquipApi.getEquipsByCurrentTenant()
        if (response && response.data) {
          // 过滤已选设备
          const selectedIds = new Set(devicesData.map(d => d.equipId || d.id))
          availableDevices.value = response.data.filter(device => !selectedIds.has(device.id))
        }
      } catch (error) {
        ElMessage.error('加载设备列表失败')
      } finally {
        loadingDevices.value = false
      }
    }

    // 按设备类型批量选择/取消
    const toggleTypeSelection = (type, selected) => {
      const deviceIds = devicesByType.value[type].map(d => d.id)
      if (selected) {
        // 添加该类型的所有设备
        deviceIds.forEach(id => {
          if (!selectedDeviceIds.value.includes(id)) {
            selectedDeviceIds.value.push(id)
          }
        })
      } else {
        // 移除该类型的所有设备
        selectedDeviceIds.value = selectedDeviceIds.value.filter(id => !deviceIds.includes(id))
      }
    }

    // 确认设备选择
    const confirmDeviceSelection = () => {
      if (selectedDeviceIds.value.length === 0) {
        ElMessage.warning('请至少选择一个设备')
        return
      }

      // 根据选中的ID找到设备数据
      const selectedDevices = availableDevices.value.filter(device => 
        selectedDeviceIds.value.includes(device.id)
      )

      // 检查是否有重复设备，避免重复添加
      const existingDeviceIds = new Set(devicesData.map(d => d.equipId || d.id))
      const newDevices = selectedDevices.filter(device => !existingDeviceIds.has(device.id))
      
      if (newDevices.length === 0) {
        ElMessage.warning('选中的设备都已经添加过了')
        return
      }

      // 转换为配置数据并添加
      let addedCount = 0
      newDevices.forEach(device => {
        try {
          const deviceConfig = createDeviceFromBackend(device)
          devicesData.push(deviceConfig)
          addedCount++
        } catch (error) {
        }
      })

      if (addedCount > 0) {
        updateData()
        ElMessage.success(`成功添加 ${addedCount} 个设备`)
      } else {
        ElMessage.error('添加设备失败')
      }
      
      deviceSelectorVisible.value = false
    }

    // 按订单查询设备
    const queryDevicesByOrders = async () => {
      if (!props.selectedOrders || props.selectedOrders.length === 0) {
        ElMessage.warning('请先选择工单')
        return
      }

      deviceSelectorVisible.value = true
      loadingDevices.value = true
      selectedDeviceIds.value = []
      typeSelectAll.value = {}

      try {
        console.log('按订单查询设备，订单数据：', props.selectedOrders)
        
        const response = await basicEquipApi.getEquipsByOrders(props.selectedOrders)
        
        if (response && response.data) {
          // 过滤已选设备
          const selectedIds = new Set(devicesData.map(d => d.equipId || d.id))
          availableDevices.value = response.data.filter(device => !selectedIds.has(device.id))
          
          console.log('按订单查询设备成功，数量：', availableDevices.value.length)
          
          if (availableDevices.value.length === 0) {
            ElMessage.info('未查询到适合当前订单的设备，或所有设备都已添加')
          } else {
            ElMessage.success(`查询到 ${availableDevices.value.length} 个适合的设备`)
          }
        }
      } catch (error) {
        console.error('按订单查询设备失败:', error)
        ElMessage.error('按订单查询设备失败：' + (error.message || '未知错误'))
      } finally {
        loadingDevices.value = false
      }
    }

    // 从分组中删除设备
    const removeDeviceFromGroup = async (equipType, deviceIndex) => {
      // 找到该类型的所有设备
      const devicesOfType = devicesData.filter(device => (device.equipType || '未分类') === equipType)
      const deviceToRemove = devicesOfType[deviceIndex]
      
      if (!deviceToRemove) {
        ElMessage.warning('未找到要删除的设备')
        return
      }

      // 确认删除
      try {
        await ElMessageBox.confirm(
          `确定要删除设备 "${deviceToRemove.equipName}" (${deviceToRemove.equipCode}) 吗？`,
          '删除确认',
          {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
      } catch (error) {
        // 用户取消删除
        return
      }
      
      // 使用更精确的方式查找设备 - 同时匹配ID和设备编码
      const originalIndex = devicesData.findIndex(device => 
        device.id === deviceToRemove.id && 
        device.equipCode === deviceToRemove.equipCode &&
        (device.equipType || '未分类') === equipType
      )
      
      if (originalIndex !== -1) {
        const removedDevice = devicesData[originalIndex]
        devicesData.splice(originalIndex, 1)
        updateData()
        
        // 检查是否还有该类型的设备，如果没有则显示提示
        const remainingDevicesOfType = devicesData.filter(device => (device.equipType || '未分类') === equipType)
        if (remainingDevicesOfType.length === 0) {
          console.log(`已删除 ${equipType} 类型的最后一个设备`)
        }
        
        ElMessage.success(`已删除设备：${removedDevice.equipName}`)
      } else {
        console.error('删除设备失败：在原数组中未找到匹配的设备', {
          deviceToRemove,
          equipType,
          deviceIndex,
          devicesData: devicesData.slice()
        })
        ElMessage.error('删除设备失败：设备数据不一致')
      }
    }

    // 验证设备基本信息（简化版本）
    const validateDevice = (device) => {
      const errors = {}
      
      if (!device.equipName) {
        errors.equipName = '设备名称不能为空'
      }
      
      if (!device.equipCode) {
        errors.equipCode = '设备编号不能为空'
      }
      
      return {
        valid: Object.keys(errors).length === 0,
        errors
      }
    }

    // 更新数据到父组件
    const updateData = () => {
      emit('update:modelValue', JSON.parse(JSON.stringify(devicesData)))
    }

    // 获取表单数据
    const getFormData = () => {
      return JSON.parse(JSON.stringify(devicesData))
    }

    // 加载数据
    const loadData = (data) => {
      // 清空现有数据
      devicesData.splice(0, devicesData.length)
      
      if (data && Array.isArray(data) && data.length > 0) {
        // 验证并清理数据，确保数据结构一致
        const validDevices = data.filter(device => {
          return device && (device.id || device.equipId) && (device.equipCode || device.equipName)
        }).map(device => {
          // 统一数据结构
          return {
            id: device.id || device.equipId || `temp_${Date.now()}_${Math.random()}`,
            equipId: device.equipId || device.id,
            equipCode: device.equipCode || device.equipName,
            equipName: device.equipName || device.equipCode,
            equipType: device.equipType || '未分类',
            equipCapacity: device.equipCapacity
          }
        })
        
        // 去重处理 - 基于equipId
        const uniqueDevices = []
        const seenIds = new Set()
        
        validDevices.forEach(device => {
          const key = device.equipId || device.id
          if (!seenIds.has(key)) {
            seenIds.add(key)
            uniqueDevices.push(device)
          }
        })
        
        // 使用splice方法确保响应性
        devicesData.splice(0, 0, ...uniqueDevices)
      }
    }

    // 验证所有设备配置
    const validateForm = () => {
      const errors = []
      
      devicesData.forEach((device, deviceIndex) => {
        // 验证设备基本信息
        const deviceValidation = validateDevice(device)
        if (!deviceValidation.valid) {
          Object.keys(deviceValidation.errors).forEach(field => {
            errors.push(`设备 ${deviceIndex + 1} (${device.equipName || '未命名'}): ${deviceValidation.errors[field]}`)
          })
        }
      })
      
      return {
        valid: errors.length === 0,
        errors
      }
    }

    // 重置表单
    const resetForm = () => {
      devicesData.length = 0
      updateData()
    }

    // ============== 监听器 ==============
    
    // 监听collapsed状态变化
    watch(
      () => props.collapsed,
      (newValue) => {
        showDevices.value = !newValue
      }
    )

    // 暴露方法给父组件
    const exposed = {
      getFormData,
      loadData,
      validateForm,
      resetForm,
      toggleDisplay
    }

    return {
      showDevices,
      devicesData,
      deviceGroupsData,
      toggleDisplay,
      openDeviceSelector,
      queryDevicesByOrders,
      removeDeviceFromGroup,
      validateDevice,
      updateData,
      // 设备选择器相关
      deviceSelectorVisible,
      loadingDevices,
      availableDevices,
      selectedDeviceIds,
      typeSelectAll,
      devicesByType,
      toggleTypeSelection,
      confirmDeviceSelection,
      ...exposed
    }
  }
})
</script>

<style scoped>
.aps-section {
  background-color: #ebebeb;
  padding: 15px;
  margin-top: 20px;
  border-radius: 5px;
}

.slide-toggle-enter-active,
.slide-toggle-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.slide-toggle-enter,
.slide-toggle-leave-to {
  max-height: 0;
  opacity: 0;
}

.slide-toggle-enter {
  max-height: 0;
}

.slide-toggle-leave-to {
  max-height: 0;
}

/* 添加设备按钮区域 */
.add-device-section {
  margin-bottom: 20px;
  text-align: center;
}

/* 设备配置项样式 */
.device-config-item {
  margin-bottom: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
  cursor: pointer;
  transition: background-color 0.2s;
}

.device-header:hover {
  background-color: #f0f0f0;
}

.device-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.device-title {
  font-weight: 600;
  color: #714B67;
  font-size: 14px;
}

.device-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delete-device-button {
  background-color: #714B67 !important;
  border-color: #714B67 !important;
  color: white !important;
  font-size: 12px;
  padding: 4px 12px !important;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.delete-device-button:hover {
  background-color: #922575 !important;
  border-color: #922575 !important;
  transform: translateY(-1px);
}

.device-content {
  padding: 20px;
  background-color: white;
}

/* 设备基本信息一行布局 */
.device-basic-info {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  flex-wrap: wrap;
}

.device-info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 160px;
}

.device-label {
  font-weight: 600;
  color: #714B67;
  font-size: 13px;
  margin-bottom: 5px;
  display: block;
}

.capacity-inline {
  display: flex;
  align-items: center;
}

/* 维护计划配置样式 */
.maintenance-section {
  margin-bottom: 15px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-weight: 600;
  color: rgb(1, 128, 165);
  font-size: 14px;
}

.maintenance-plan-item {
  margin-bottom: 15px;
}

.maintenance-plan-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.empty-state {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px dashed #ddd;
}

.error-text {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 5px;
  margin-left: 5px;
}

.delete-icon-button {
  color: #714B67 !important;
  padding: 6px !important;
  transition: all 0.2s ease;
}

.delete-icon-button:hover {
  color: #922575 !important;
  background-color: #f1edf0 !important;
  border-radius: 4px;
}

/* 表单错误状态 */
.is-error :deep(.el-input__wrapper) {
  border-color: #f56c6c;
}

.is-error :deep(.el-input-number__wrapper) {
  border-color: #f56c6c;
}

/* 保持与现有组件一致的表单标签样式 */
:deep(.el-form-item__label) {
  color: #714B67 !important;
  font-weight: 600;
}

/* 按钮样式 */
.idoo-details-button {
  background-color: rgb(1, 128, 165);
  border-color: rgb(1, 128, 165);
  color: white;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.idoo-details-button:hover {
  background-color: rgb(1, 108, 145);
  border-color: rgb(1, 108, 145);
}

/* 按订单查询按钮样式 */
.idoo-order-query-button {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.idoo-order-query-button:hover:not(:disabled) {
  background-color: #5daf34;
  border-color: #5daf34;
}

.idoo-order-query-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 设备选择对话框样式 */
.device-selector-content {
  max-height: 600px;
  overflow-y: auto;
}

.loading-state {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
}

.device-type-group {
  margin-bottom: 25px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
}

.device-type-header {
  background-color: #f8f9fa;
  padding: 12px 15px;
  border-bottom: 1px solid #e4e7ed;
}

.type-title {
  font-weight: 600;
  color: #714B67;
  font-size: 14px;
  margin-left: 5px;
}

.device-list {
  padding: 15px;
  background-color: white;
}

.device-item {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.device-item:hover {
  background-color: #f5f7fa;
}

.device-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.device-name {
  font-weight: 500;
  color: #303133;
  min-width: 120px;
}

.device-meta {
  color: #909399;
  font-size: 13px;
}

.device-code {
  color: #909399;
  font-size: 12px;
  margin-left: 8px;
  font-weight: normal;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 设备表格相关样式 */
.device-table {
  border-radius: 5px;
  overflow: hidden;
}

.expand-content {
  background-color: #f8f9fa;
  padding: 20px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #e9ecef;
}

.device-list-section {
  margin-bottom: 0;
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.device-item-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}

.device-item-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.device-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.device-card-title {
  flex: 1;
}

.device-name {
  font-weight: 600;
  color: #333;
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
}

.device-code {
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.delete-device-btn {
  color: #f56c6c !important;
  font-size: 16px;
}

.delete-device-btn:hover {
  color: #f20c0c !important;
  background-color: #fef0f0 !important;
}

.device-card-info {
  margin-top: 10px;
}

.device-info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.device-info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #666;
  font-weight: 500;
}

.info-value {
  color: #333;
  font-weight: 400;
  text-align: right;
  max-width: 60%;
  word-break: break-all;
}

.device-names {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
</style>
